<template>
  <ul class="popup-menu submenu" :style="submenuStyles">
    <slot></slot>
  </ul>
</template>

<script setup lang="ts">
import { inject, computed, type CSSProperties } from "vue";
import "./Dropdown.scss";

defineOptions({
  name: "DropdownSubmenu",
});

// 注入父菜单的 maxHeight 设置
const maxHeight = inject<number | string | undefined>(
  "dropdownMaxHeight",
  undefined
);

const submenuStyles = computed<CSSProperties>(() => {
  const styles: CSSProperties = {};

  // 检查是否是嵌套在另一个子菜单内的子菜单（三级菜单）
  const parentElement = inject<any>("parentElement", null);
  const isNestedInSubmenu =
    parentElement?.classList?.contains("submenu") || false;

  // 如果设置了 maxHeight 且不是嵌套子菜单，可以设置滚动
  // 但为了允许三级菜单溢出，即使是二级菜单也不设置 overflow-y: auto
  // 而是让CSS来处理滚动，同时保持横向溢出
  if (maxHeight !== undefined) {
    const height = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
    // 只在非嵌套情况下设置 maxHeight，但 overflow 由 CSS 控制
    if (!isNestedInSubmenu) {
      styles.maxHeight = height;
    }
  }

  // 始终使用 visible，让CSS的 !important 规则生效，确保三级菜单可以溢出
  styles.overflowY = "visible";
  styles.overflowX = "visible";

  return styles;
});
</script>
